<template>
  <el-card class="mt-10">
    <div class="pie-container" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "PieChart",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";

const chartRef = ref();

onMounted(() => {
  const myEcharts = echarts.init(chartRef.value);

  const axisX = [
    "粉面粥店",
    "简餐便当",
    "汉堡披萨",
    "香锅冒菜",
    "小吃炸串",
    "地方菜系",
    "轻食简餐",
  ];

  const data1 = [56, 52, 95, 41, 30, 69, 63];

  const data = axisX.map((item, index) => {
    return {
      name: item,
      value: data1[index],
    };
  });

  const option = {
    title: [
      {
        text: "品类分布",
      },
    ],
    series: {
      type: "pie",
      data: data,
      radius: ["40%", "60%"],
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 2,
      },
    },
    legend: {
      top: "middle",
      right: 0,
      orient: "vertical",
      formatter: function (name: string) {
        const index = axisX.findIndex((item) => item === name);
        const value = data1[index];
        const percent =
          (value /
            data1.reduce((a, b) => {
              return a + b;
            }, 0)) *
          100;
        return `${name}|${percent.toFixed(2)}%`;
      },
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.pie-container {
  margin: 0 auto;
  width: 800px;
  height: 400px;
}
</style>
